<template>
  <Modal v-if="visiable" width="400px" height="fit-content">
    <div class="flex flex-col h-100 create pb-2">
      <div class="core-head">
        <div class="text-16 text-bold text-333">新建</div>
        <div class="icon-button" @click="close">
          <img :src="closePng" width="16" />
        </div>
      </div>
      <div class="flex-1 pb-4">
        <form ref="form" class="flex flex-col gr-8" @submit="submit">
          <ul>
            <li>
              <div>标题</div>
              <input
                v-model="program.title"
                type="text"
                required
                placeholder="请输入收藏夹的名字"
                :maxlength="20"
              />
            </li>
            <li>
              <div>分类</div>
              <div class="select-input">
                <input
                  v-model="program.category"
                  type="text"
                  placeholder="选择/输入分类"
                  :maxlength="6"
                />
                <select v-model="program.category">
                  <option
                    v-for="item in categoryList"
                    :key="item.value"
                    :value="item.value"
                    :maxlength="20"
                    >{{ item.lable }}</option
                  >
                </select>
              </div>
            </li>
            <li style="align-items: start">
              <div>描述</div>
              <textarea
                v-model="program.desc"
                type="text"
                :maxlength="100"
                placeholder="请输入描述,在分享时别人会看到这段描述"
              ></textarea>
            </li>
            <li>
              <div>默认打开</div>
              <div>
                <input
                  v-model="defaultId"
                  type="checkbox"
                  style="width: 14px; height: 14px"
                />
              </div>
            </li>
            <div class="flex justify-right align-center gc-12">
              <button type="submit" class="submit core-button">完成</button>
            </div>
          </ul>
        </form>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import Modal from '@/views/components/modal/Modal.vue';
  import closePng from '@/assets/images/close.png';
  import sharePng from '@/assets/images/share.png';
  import { ref, watch } from 'vue';
  import { ProgramData } from '@/store/program/types';
  import { programData } from '@/store/program/utils';
  import { nanoid } from 'nanoid';
  import { formatDate } from '@/utils/utils';

  const form = ref();
  const defaultId = ref();

  const editMode = ref(false);
  const emit = defineEmits(['update:visiable']);
  const props = defineProps<{
    visiable: boolean;
    data?: ProgramData;
  }>();
  const categoryList = [
    {
      lable: 'IT',
      value: 'it',
    },
    {
      lable: '教育',
      value: 'edu',
    },
  ];
  const raw: ProgramData = {
    title: '',
    desc: '',
    category: '',
    data: [],
    id: '',
    date: formatDate(new Date()),
  };
  const program = ref<ProgramData>({ ...raw });
  const close = () => {
    program.value = {
      ...raw,
    };
    emit('update:visiable', !props.visiable);
  };
  const submit = () => {
    const e = window.event as Event;
    e.preventDefault();
    const data = programData();
    if (!editMode.value) {
      const formEl = form.value as HTMLFormElement;
      if (formEl.checkValidity()) {
        program.value.id = nanoid();
        data.programList.push({
          ...program.value,
        });
      }
    }
    if (defaultId.value) {
      data.defaultId = JSON.parse(JSON.stringify(program.value.id));
    }
    /* 重置 */
    close();
  };

  watch(
    props,
    () => {
      if (props.data) {
        program.value = props.data;
        editMode.value = true;
      } else {
        program.value = {
          ...raw,
        };
      }
    },
    {
      deep: true,
    }
  );
</script>

<style lang="scss" scoped>
  @import 'create.scss';
</style>
